<!--  -->
<template>
  <div class="landing-parce" :class="{'landing-price-change': changeStyle}">
      <div class="landing-bg">
            <div class="landing-parce-top">
                <div>
                    <h2 class="animated bounce">新用户注册登录</h2>
                    <p class="animated bounce">*当前是内测阶段，新用户注册后，需要审核通过才可以使用</p>
                    <el-row :gutter="topInterval" class="landing-parce-con">
                        <el-col :span="12">
                            <div class="landing-parce-item animated bounceIn">
                                <div></div>
                                <div>
                                    <div><img src="@/common/image/landing_price_top_one.png" alt=""></div>
                                    <p>赠送20算力</p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="landing-parce-item animated bounceIn">
                                <div></div>
                                <div>
                                    <div><img src="@/common/image/landing_price_top_two.png" alt=""></div>
                                    <p>赠送200GB储存</p>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <p>
                        <span @click="toRegister">{{this.userInfo && this.userInfo.token?"进入系统&nbsp;&nbsp;&rarr;":"立即注册&nbsp;&nbsp;&rarr;"}}
                            </span>
                    </p>
                </div>
            </div>
            <div class="landing-parce-con">
                <div>
                    <h4>收费标准</h4>
                    <p id="landing-price-con">*标准账户提交任务时，按不同的GPU卡进行不同的计时收费标准</p>
                    <div class="landing-parce-con-table" :class="[{animated:PriceBtn},{zoomInRight:PriceBtn}]">
                        <el-table :data="pricedata" style="width: 100%">
                            <el-table-column prop="GPU" label="GPU" :width="changeStyle?'200px':'300px'" align="center"></el-table-column>
                            <el-table-column prop="CPU" label="CPU" :width="changeStyle?'200px':'300px'" align="center"></el-table-column>
                            <el-table-column prop="memory" label="内存" :width="changeStyle?'200px':'300px'" align="center"></el-table-column>
                            <el-table-column label="收费标准" :width="changeStyle?'200px':'300px'" align="center" class="moneytext">
                                <template slot-scope="scope"><span style="color: #db5052">{{ scope.row.money }}</span></template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="landing-parce-con-people" :class="[{animated:PriceBtn},{zoomInDown:PriceBtn}]">
                        <img src="@/common/image/landing-parce-con-people.png" alt="">
                    </div>
                </div>
            </div>
      </div>
      <div class="landing-parce-bottom">
          <div class="landing-parce-bottom-con">
            <h4 :class="[{animated:PriceBottomBtn},{flash:PriceBottomBtn}]">企业用户</h4>
            <p>如果您是企业用户可以与我们联系，为您提供更多个性化需求</p>
            <ul>
                <li>
                    <div class="landing-parce-bottom-photo">
                        <img src="@/common/image/landing-parce-bottom-photo.png" alt="">
                    </div>
                    电话：0551-65708115
                </li>
                <li>
                    <div class="landing-parce-bottom-photo">
                        <img src="@/common/image/landing-parce-bottom-email.png" alt="">
                    </div>
                    邮箱：bitahub@leinao.ai
                </li>
            </ul>
            <div :class="[{animated:PriceBottomBtn},{rotateIn:PriceBottomBtn}]">
                <img src="@/common/image/landing-parce-bottom-people.png" alt="">
            </div>
          </div>
          <div class="landing-parce-bottom-ico">
              <img src="@/common/image/landing-parce-bottom-ico.png" alt="">
          </div>
      </div>
      <div id="landingpirce-p"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      topInterval: parseInt(117),
      pricedata: [{
        GPU: '1080Ti',
        CPU: '2  vCPUs',
        memory: '16GB',
        money: '1算力/小时'
      }, {
        GPU: 'TitanXP',
        CPU: '2  vCPUs',
        memory: '16GB',
        money: '1.5算力/小时'
      }, {
        GPU: 'V100',
        CPU: '2  vCPUs',
        memory: '32GB',
        money: '9算力/小时'
      }, {
        GPU: '0',
        CPU: '1  vCPU',
        memory: '4GB',
        money: '0.2算力/小时'
      }],
      screenWidth: document.body.clientWidth,
      changeStyle: false,
      PriceBtn: false,
      PriceBottomBtn: false
    }
  },

  components: {},

  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },

  watch: {
    screenWidth (val) {
      this.init(val)
      this.screenWidth = val
    }
  },

  mounted () {
    this.init(this.screenWidth)
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
    window.addEventListener('scroll', that.handleFun)
  },

  beforeDestroy () {
    window.removeEventListener('scroll', this.handleFun)
  },

  methods: {
    init (screenWidth) {
      if (screenWidth <= 1400) {
        this.changeStyle = true
      } else {
        this.changeStyle = false
      }
    },
    toRegister () {
      if (this.userInfo && this.userInfo.token) {
        this.$router.push({ path: '/project/list' })
      } else {
        window.open(`${process.env.VUE_APP_BITA_REGISTER}`)
      }
    },
    handleFun () {
      if (document.getElementById('landing-price-con')) {
        var aprice = document.getElementById('landing-price-con').offsetTop
        var ahprice = document.getElementById('landing-price-con').offsetHeight
      }
      if (document.getElementById('landingpirce-p')) {
        var bpricebottom = document.getElementById('landingpirce-p').offsetTop
        var bhpricebottom = document.getElementById('landingpirce-p').offsetHeight
      }
      var top = (document.body.scrollTop || document.documentElement.scrollTop)
      var h = document.documentElement.clientHeight || document.body.clientHeight
      var that = this
      if (aprice >= (top - ahprice) && aprice < (top + h)) {
        (function () {
          that.PriceBtn = true
        })()
      }
      if (bpricebottom >= (top - bhpricebottom) && bpricebottom < (top + h)) {
        (function () {
          that.PriceBottomBtn = true
        })()
      }
    }
  }
}

</script>
<style lang="stylus">
$clinewidth = 1200px
$clinewidthchange = 800px
title-style-price-change()
    font-size 32px
    line-height 45px
    color #2d323b
    padding 137px 0 11px
title-style-price()
    font-size 42px
    line-height 59px
    color #2d323b
    padding 198px 0 16px
title-two-price-change()
    font-size 16px
    line-height 22px
    color #63666c
    margin-bottom 75px
title-two-price()
    font-size 20px
    line-height 28px
    color #63666c
    margin-bottom 148px
    position relative
    top 0
    left 0
.landing-parce
  #landingpirce-p
    font-size 0
    height 0
  >.landing-parce-bottom
    position relative
    top 0
    left 0
    >.landing-parce-bottom-ico
        position absolute
        bottom 0
        left 0
        z-index 1
        width 100%
        height auto
        >img
            width 100%
            height auto
    >.landing-parce-bottom-con
        width $clinewidth
        margin 0 auto 0
        padding-left 459px
        z-index 2
        box-sizing border-box
        position relative
        top 0
        left 0
        padding-bottom 366px
        >h4
            title-style-price()
            padding-top 205px
            &.animated
                animation-delay 1.2s
        >p
            title-two-price()
            margin-bottom 79px
        >ul
            >li
                position relative
                top 0
                left 0
                font-size 16px
                line-height 22px
                padding 7px 0 7px 61px
                color #2d323b
                margin-bottom 16px
                >div
                    position absolute
                    top 0
                    left 0
                    width 36px
                    height 36px
                    >img
                        width 100%
                        height 100%
        >div
            position absolute
            top 226px
            left 0
            width 376px
            height 473px
            opacity 0
            &.animated
                opacity 1
                animate-duration 1.5s
            >img
                width 100%
                height 100%
  >div.landing-bg
    background-image url('../../common/image/landing-price-bg.png')
    >.landing-parce-con
        background-image url('../../common/image/landing-parce-con-bg.png')
        background-size 100% 100%
        height 893px
        >div
            width $clinewidth
            margin 0 auto 0
            position relative
            top 0
            left 0
            >h4
                title-style-price()
            >p
                title-two-price()
            .landing-parce-con-table
                box-shadow 0 0px 4px #AC9689
                box-sizing border-box
                .el-table th
                    color #ffffff
                    background #66BAFF
                    font-size 24px
                    padding 20px 0 22px
                .el-table td
                    color #2D323B
                    font-size 18px
                    padding 22px 0 21px
                    border-bottom 2px solid #E7F4FF
                .el-table td.moneytext
                    color red
            .landing-parce-con-people
                position absolute
                top 56px
                right 0
                width 380px
                height 285px
                opacity 0
                &.animated
                    opacity 1
                >img
                    width 100%
                    height 100%
    >.landing-parce-top
        padding-top 108px
        >div
            width $clinewidth
            margin 0 auto 0
            >h2
                font-size 48px
                line-height 67px
                color #2D323B
                margin-bottom 16px
            >p:nth-of-type(1)
                font-size 20px
                line-height 28px
                color #63666c
                margin-bottom 81px
            >.landing-parce-con
                padding-bottom 33px
            .landing-parce-item
                background #66BAFF
                position relative
                top 0
                left 0
                min-height 220px
                &:hover div:nth-of-type(1)
                    opacity 1
                >div:nth-of-type(2)
                    position absolute
                    top 0
                    left 0
                    width 100%
                    padding 60px 0 55px
                    z-index 2
                    >div
                        width 42px
                        height 42px
                        margin 0 auto 0
                        >img
                            width 100%
                            height 100%
                    >p
                        padding-top 30px
                        line-height 33px
                        font-size 24px
                        text-align center
                        color #ffffff
                        z-index 2
                >div:nth-of-type(1)
                    position absolute
                    top 0
                    left 0
                    width 100%
                    height 100%
                    background-color rgba(68,149,216,0.75)
                    z-index 0
                    opacity 0
                    transition-duration 0.5s
            >p:nth-of-type(2)
                text-align right
                font-size 18px
                line-height 25px
                color #2d323b
                padding-bottom 53px
                font-weight bold
                >span
                    cursor pointer
.landing-price-change
    >.landing-parce-bottom
        >.landing-parce-bottom-con
            width $clinewidthchange
            padding-left 310px
            padding-bottom 286px
            >h4
                title-style-price-change()
            >p
                title-two-price-change()
                margin-bottom 79px
            >ul
                >li
                    position relative
                    top 0
                    left 0
                    font-size 14px
                    line-height 18px
                    padding 6px 0 6px 50px
                    color #2d323b
                    margin-bottom 16px
                    >div
                        position absolute
                        top 0
                        left 0
                        width 30px
                        height 30px
                        >img
                            width 100%
                            height 100%
            >div
                position absolute
                top 210px
                left 0
                width 258px
                height 325px
                >img
                    width 100%
                    height 100%
    >div.landing-bg
        >.landing-parce-con
            height 619px
            >div
                width $clinewidthchange
                >h4
                    title-style-price-change()
                >p
                    title-two-price-change()
                .landing-parce-con-people
                    position absolute
                    top 71px
                    right 0
                    width 237px
                    height 176px
        >.landing-parce-top
            padding-top 101px
            >div
                width $clinewidthchange
                >h2
                    font-size 32px
                    line-height 45px
                    margin-bottom 19px
                >p:nth-of-type(1)
                    font-size 16px
                    line-height 22px
                    margin-bottom 66px
                >.landing-parce-con
                    padding-bottom 20px
                .landing-parce-item
                    >div:nth-of-type(2)
                        >div
                            width 45px
                            height 42px
                >p:nth-of-type(2)
                    text-align right
                    font-size 14px
                    line-height 20px
                    color #8E9091
                    padding-bottom 46px
</style>
